import { useEffect, useState } from "react";
import { useProgress } from "@react-three/drei";
import "./index.less";
import { reducer, useConnect } from "../../utils/dva17";
import { NMold, RSetState } from "../../config/constants";

// 模型加载时显示的页面
export default () => {
  const { load } = useConnect(NMold);

  const { progress } = useProgress();
  const [isLoad, setIsLoad] = useState(false);

  useEffect(() => {
    if (progress >= 100) {
      setIsLoad(true);
    }
  }, [progress]);

  function start() {
    reducer(NMold, RSetState, { load: false, ready: true });
  }

  return (
    load && (
      <div className={`loading`}>
        <div className="load">加载进度： {progress.toFixed()} %</div>
        {isLoad && (
          <button className="start" onClick={start}>
            开始
          </button>
        )}
      </div>
    )
  );
};
